<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>VueJS入门</title>
  <!-- <script src="js/vue.js"></script> -->
  <script src="js/vue.min.js"></script>
  <script >
    window.onload = function(){
      new Vue({
        el: '#box',
        data: {
          msg: '欢迎 Vue',
          msg2: 12,
          msg3: true,
          arr: ['apple',"banana","org"],
          json:{a:'apple1',b:'banana1',c:'org1'}
        },
        methods: {
          show: function(){
            alert(1)
          },
          add: function(){
            // alert(this.arr)
            this.arr.push("tomato")
          },
          xiaochu: function(){
            this.msg3 = !this.msg3
          }
        }
      })
    }
  </script>
</head>
<body>
  <div id="box">
    <input type="text" v-model="msg">
    <br>
    {{msg}}
    <br>
    {{msg2}}
    <br>
    {{msg3}}
    <br>
    {{arr[2]}}
    <br>
    {{json['b']}}
    <br>
    <hr>
    <input type="button" name="" value="按钮" v-on:click="add()">
    <hr>
    比如表
    <ul>
      <li v-for="(index,value) in arr">{{index}}-{{ value}}- {{$index}}</li>
    </ul>
    <hr>
    <ul>
      <li v-for="(key,value) in json">{{key}}-{{value}}-{{$index}}-{{$key}}</li>
    </ul>
    <hr>
    <input type="button" name="" value="消失" v-on:click="xiaochu()">
    <div style="width:100px;height:100px;background: red;" v-show="msg3"></div>
  </div>

</body>
</html>
